<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0" />
    <meta name="format-detection" content="telephone=no,email=no,date=no,address=no">
    <title>个人资料</title>
    <link rel="stylesheet" type="text/css" href="__CSS__api.css" />
    <link rel="stylesheet" type="text/css" href="__CSS__aui.css" />
    <link rel="stylesheet" type="text/css" href="__CSS__common.css" />
    <style>
        .aui-bar-nav .aui-iconfont {
            position: relative;
            font-family: "aui_iconfont" !important;
            font-size: 0.75rem;
            color: #E73C5C;
            font-style: normal;
            -webkit-font-smoothing: antialiased;
            -moz-osx-font-smoothing: grayscale;
            height: 2.4rem;
        }

        .aui-bar-nav {
            background-color: #fff;
        }

        .aui-icon-tu {
            height: 2.4rem;
            width: 49px;
            background: url('__IMG__left.png') no-repeat 0.5rem center;
            background-size: 22px 22px;
        }

        .aui-bar-nav .aui-pull-right {
            padding-right: 0.75rem;
        }

        .aui-bar-nav .aui-title {
            font-size: 0.9rem;
            color: #333333;
            font-weight: 500;
        }
        body {
            background-color: #F5F5F5;
            padding-top: 0.5rem;
        }

        .outer {
            padding-left: 0.75rem;
            padding-right: 0.75rem;
            background-color: #FFFFFF;
        }

        .left_title {
            height: 4.5rem;
            line-height: 4.5rem;
            color: #333;
            font-size: 16px;
        }

        .left_title1 {
            height: 2.5rem;
            line-height: 2.5rem;
            color: #333;
            font-size: 16px;
        }

        .left_title2 {
            height: 3.25rem;
            line-height: 3.25rem;
            color: #333;
            font-size: 16px;
        }

        .xinxi {
            height: 2.4rem;
            line-height: 2.4rem;
            color: #333;
            font-size: 16px;
            text-align: right;
            padding-right: 0.5rem;
        }

        .avatar {
            width: 3.25rem;
            height: 3.25rem;
            margin-top: 0.625rem;
            border-radius: 50%;
        }

        .avatar img {
            border-radius: 50%;
            width: 100%;
            height: 100%;
        }

        .arrow {
            width: 0.75rem;
            height: 2.5rem;
            background: url('__IMG__main5_right.png') no-repeat right center;
            background-size: 0.4rem 0.65rem;
        }

        .intro {
            color: #999;
            height: 3.25rem;
            font-size: 15px;
            position: relative;
        }

        .introo {
            position: absolute;
            top: 0;
            bottom: 0;
            left: 0;
            right: 0;
            width: 100%;
            margin: auto;
            display: table;
            padding-right: 0.7rem;
            padding-left: 1.75rem;
        }

        .arrow1 {
            width: 0.75rem;
            height: 3.25rem;
            background: url('__IMG__main5_right.png') no-repeat right center;
            background-size: 0.4rem 0.65rem;
        }

        .aui-actionsheet-btn-item {
            height: 2.45rem;
            line-height: 2.45rem;
            color: #333;
            font-size: 0.75rem;
        }
        .zhezhao{
            background-color: rgba(0,0,0,0.3);width: 100%;
            height: 100%;z-index: 999;
            position: fixed;left: 0;
            top: 0;
        }
        .paizhao_choose{
            position: absolute;
            left: 0;bottom: 0;
            width: 100%;
        }
        .paizhao_choose_detail{
           background-color: #FFFFFF;
            border-bottom: 1px solid #f5f5f5;
            height: 45px;
            line-height: 45px;
            text-align: center;
            width: 100%;
        }
        #clipArea {
            margin: auto;
            height:100%;
            width: 100%;
        }
        #file,
        #clipBtn {
            margin: 20px;
        }
        #view {
            margin: 0 auto;
            width: 100%;
            height: 80%;
        }
        .yesorno_wrap{
            background-color: black;
            display: none;
            width: 100%;
            height: 100%;
            position: fixed;
            left: 0;
            top: 0;
            z-index: 99;

        }

        .yesorno{
            z-index: 9999;
            display: block;
            position: absolute;
            left: 0;
            bottom: 0;
            width: 100%;

            background-color:#ffffff;
            box-sizing: border-box;
        }
        .no{
            padding-left: 15px;
            box-sizing: border-box;
            height: 60px;
            line-height: 60px;
            text-align: left;
            float: left;
            width: 50%;
        }
        .yes{
            box-sizing: border-box;
            height: 60px;
            line-height: 60px;
            text-align: right;
            float: left;
            padding-right: 15px;
            width: 50%;
        }
        .body {
            display: none;
            position: fixed;
            z-index: 10000;
            left: 0;
            top: 0;
            width: 100%;
            height: 100%;
            background: rgba(0, 0, 0, 0.2);
        }

        .title {
            height: 44px;
            color: #EB9F18;
            line-height: 44px;
            text-align: center;
            background-color: #FFFFFF;
            border-top-right-radius: 5px;
            border-top-left-radius: 5px;
            border-bottom: 1px solid #EFEFEF;
        }

        .confirm {
            position: absolute;
            top: 0;
            right: 0;
            height: 44px;
            line-height: 44px;
            color: #F4A435;
            font-size: 16px;
            padding-right: 15px;
        }

        .close {
            position: absolute;
            top: 0;
            left: 0;
            height: 44px;
            line-height: 44px;
            color: #999999;
            font-size: 14px;
            padding-left: 15px;
        }

        .list-area {
            display: flex;
            align-items: center;
            position: relative;
            height: 145px;
            background-color: #FFFFFF;
        }

        .list-01 {
            flex: 1;
            overflow-y: scroll;
            height: 145px;
        }

        .scroll-area {
            min-height: 290px;
        }

        .hr-1 {
            -webkit-transform: scaleY(0.5);
            transform: scaleY(0.5);
            width: 100%;
            height: 1px;
            position: absolute;
            top: 44px;
            left: 0;
            background: #E8E8E8;
        }

        .hr-2 {
            -webkit-transform: scaleY(0.5);
            transform: scaleY(0.5);
            width: 100%;
            height: 1px;
            position: absolute;
            bottom: 51px;
            left: 0;
            background: #E8E8E8;
        }

        .list-item {
            height: 51px;
            text-align: center;
            line-height: 51px;
            color: #999999;
            font-size:15px;
        }

        .list-item-active {
            height: 40px;
            text-align: center;
            line-height: 41px;
            color: #333333;
            font-size: 16px;
            font-weight: 700;
        }
        .alltu{
            width: 100%;

            box-sizing: border-box;
            padding-top: 0.2rem;

        }
        .alltu .newimg{
            width: 100%;
            box-sizing: border-box;
            height: 150px;
        }
    </style>

</head>

<body ontouchstart="">
<div class="l_box"  id="loading2"><img src="__IMG__loading.gif" alt="" id="loading"></div>

<header class="aui-bar aui-bar-nav underLine" style="padding-top:25px;" id="header">
    <a class="aui-pull-left" tapmode="active" onclick="history.go(-1)"> <span class="aui-iconfont aui-icon-tu"> </span> </a>
    <div class="aui-title">个人资料</div>
</header>
<div class="outer">
    <div class="inner underLine flex-wrap" onclick="show_paizhao()" id="add" tapmode='active'>
        <div class="left_title">用户头像</div>
        <div class="flex-con"></div>
        <div class="avatar"><img id="touxiang" src="__IMG__avatar.png" /></div>
    </div>
</div>
<div class="outer">
    <div class="inner underLine flex-wrap" onclick="fnName()" tapmode='active'>
        <div class="left_title1">昵称</div>
        <div class="flex-con xinxi" id="nicheng"></div>
        <div class="arrow"></div>
    </div>
</div>
<div class="outer">
    <div class="inner underLine flex-wrap" onclick="fnKe()" id="age" tapmode='active'>
        <div class="left_title1">年龄</div>
        <div class="flex-con xinxi" id="agenumber"></div>
        <div class="arrow"></div>
    </div>
</div>
<div class="outer" onclick="getarea()" tapmode='active'>
    <div class="inner underLine flex-wrap">
        <div class="left_title1">城市</div>
        <div class="flex-con xinxi" id="area"></div>
        <div class="arrow"></div>
    </div>
</div>
<div class="outer" onclick="fnJieshao()"  tapmode='active'>
    <div class="inner flex-wrap">
        <div class="left_title2">介绍</div>
        <div class="flex-con intro">
            <div class="introo aui-ellipsis-1" id="user_me_content" style="text-align: right;">
                这里是自我介绍，一共只有30个字显示不下两行展示
            </div>
        </div>
        <div class="arrow1"></div>
    </div>
</div>

<div class="body" id="zhezhao">
    <div style="position: fixed;bottom: 0;left: 0;width: 100%" class="underLine" id="caozuo">
        <div class="title">
            <div class="close" tapmode>取消</div>
            <a href="javascript:void(0)">  <div class="confirm" tapmode>确定</div> </a>

        </div>
        <div class="list-area">
            <div class="list-01" id="child" onscroll="CalculateDistance2(this)">
                <div class="scroll-area" id="render-item-2">
                </div>
            </div>

            <div class="hr-1"></div>
            <div class="hr-2"></div>
        </div>
    </div>

</div>


<div class="toast-wrap">
    <span class="toast-msg"></span>
</div>
</body>
<script type="text/javascript" src="__JS__jquery.min.js"></script>
<script type="text/javascript" src="__JS__api.js"></script>
<script type="text/javascript" src="__JS__tt.js"></script>
<script type="text/javascript" src="__JS__common.js"></script>
<script src="https://res.wx.qq.com/open/js/jweixin-1.2.0.js" type="text/javascript" charset="utf-8"></script>


<script type="text/javascript">
function fnName() {
    var str=document.getElementById('nicheng').innerHTML;
    location.href='{:url("my/change_name")}?name='+str;
}
function fnAge() {
    var agenumber2=document.getElementById('agenumber').innerHTML;
    location.href='{:url("my/select_age")}?agenumber='+agenumber2;
}
var agenumber=document.getElementById('agenumber');
    var yesorno=document.getElementById('yesorno');
if(window.localStorage.getItem('agenumber')){

    agenumber.innerHTML=window.localStorage.getItem('agenumber');
}
function getarea() {
    location.href='{:url("my/select_area")}?person_center_city=person_center_city';
}
var area=document.getElementById('area');
if(window.localStorage.getItem('person_center_city')){
    area.innerHTML=window.localStorage.getItem('person_center_city');
}
function fnJieshao() {
    var jieshao=document.getElementById('user_me_content').innerHTML;

    location.href='{:url("my/change_jieshao")}?jieshao='+jieshao;

}
    // 获取个人资料数据
    getdata();
    function getdata(){
        loaddingOpen();
        $.ajax({
            url:'{:url("My/getUserData")}',
            type:'POST',
            dataType:'JSON',
            success: function(data){
                loaddingClose();
                if (data.status==200) {
                    if (data.data&&data.data.user_image) {
                        document.getElementById('touxiang').src=data.data.user_image;
                    }
                    if (data.data&&data.data.user_username) {
                        document.getElementById('nicheng').innerHTML=data.data.user_username;
                    }
                    if (data.data&&data.data.user_age) {
                        document.getElementById('agenumber').innerHTML=data.data.user_age;
                    }
                    if (data.data&&data.data.district) {
                        document.getElementById('area').innerHTML=data.data.district;
                    }
                    if (data.data&&data.data.user_me_content) {
                        document.getElementById('user_me_content').innerHTML=data.data.user_me_content;
                    }

                }else {
                    toast(data.msg);
                }

            },
            error: function(xhr, type){
                loaddingClose();
                toast('无网络或连接超时，请重试！');
                // 即使加载出错，也得重置
            }
        });
    }

</script>
<script>
    wx.config({$json});
    wx.ready(function () {
        wx.error(function(res){
            alert("接口调取失败")
        });
        wx.checkJsApi({
            jsApiList: [
                'chooseImage',
                'uploadImage',
                'downloadImage',
                'getLocalImgData',
            ],
            success: function (res) {
                if (res.checkResult.getLocation == false) {
                    alert('你的微信版本太低，不支持微信JS接口，请升级到最新的微信版本！');
                    return;
                }
            },
            error:function (res) {
                alert('res-error')
            }
        });
    })
    //上传头像
    var show_paizhao = function(){
        wx.chooseImage({
            count: 1,
            sizeType: ['original', 'compressed'], // 可以指定是原图还是压缩图，默认二者都有
            sourceType: ['album', 'camera'], // 可以指定来源是相册还是相机，默认二者都有
            success: function (res) {
                var zzz = res.localIds;
                wx.uploadImage({
                    localId: zzz.toString(), // 需要上传的图片的本地ID，由chooseImage接口获得
                    isShowProgressTips: 0, // 默认为1，显示进度提示
                    success: function (res) {
                        wx.downloadImage({
                            serverId: res.serverId, // 需要下载的图片的服务器端ID，由uploadImage接口获得
                            success: function (res) {
                                wx.getLocalImgData({
                                    localId: res.localId, // 图片的localID
                                    success: function (res) {
                                        $('#touxiang').attr('src',zzz);
                                        userinfoAjaxChange(res.localData);
                                    }
                                });
                            }
                        });
                    }
                });
            }
        })
    }
    /**
     * ajax更改
     * */
    function userinfoAjaxChange(value) {
        var uid = $('#uid').val();
        $.ajax({
            url: '{:url("My/editUser")}',
            data: {'user_image':value},//
            type: 'POST',
            dataType: 'JSON',
            success: function (data) {
                if(data.status==200){
                    return true;
                }
            }
        })
    }
</script>
<script type="text/javascript">
    function fnKe() {
        // window.location.href='{:url("my/select_keshi")}';
        $('#zhezhao').show();
        getdata2();
    }
    function getdata2() {
        var  num=1;
        if ($('#agenumber').html()!='') {
            num=$('#agenumber').html();
        }
        numtotal=parseInt(num)*51;
        document.getElementById('render-item-2').innerHTML=renderShi();
        document.getElementById('child').scrollTop =numtotal;
        document.getElementById('child').addEventListener('touchmove', CalculateDistance2(document.getElementById('child')));
    };

    //渲染年底
    function renderShi () {
        var html = '<div class="list-item"></div>';

        for (var i = 0; i < 120; i++) {
            if (i == 1) {
                html+='<div class="list-item list-item-active">'+i+'</div>';

            }else{
                html+='<div class="list-item">'+i+'</div>';

            }

        }
        html += '<div class="list-item"></div>';
        return html;
    }




    function CalculateDistance2 (el) {
        var scrollDistance = +el.scrollTop;
        var parentItem=document.getElementsByClassName('list-item');
        // var parentItem = $api.domAll(el, '.list-item');
        document.getElementsByClassName('list-item-active')[0].className='list-item';
        parentItem[parseInt(scrollDistance / 51) + 1].className='list-item list-item-active';

        setTimeout(function () {
            el.scrollTop = (parseInt(+el.scrollTop / 51)) * 51;
        }, 300);
    }


    //确认
    // 确认按钮
    $('.confirm').click(function(e){

        var agenumber_obj=document.getElementsByClassName('list-item-active')[0].innerHTML;
        save(agenumber_obj);
        $('#zhezhao').hide();
        e.stopPropagation();
    })
    $('#zhezhao').click(function(e){

        $('#zhezhao').hide();
    })
    // 取消按钮
    $('.close').click(function(e){

        $('#zhezhao').hide();
        e.stopPropagation();
    })

    $('#caozuo').click(function(e){
        e.stopPropagation();
    })

    function save(agenumber_obj) {
        $.ajax({
            url:'{:url("My/editUser")}',
            data:'user_age='+agenumber_obj,//
            type:'POST',
            dataType:'JSON',
            success: function(data){
                if (data.status==200) {
                    $('#agenumber').html(agenumber_obj);
                }else {
                    toast(data.msg);
                }

            },
            error: function(xhr, type){
                toast('无网络或连接超时，请重试！');
                // 即使加载出错，也得重置

            }
        });
    }
    //取消
    function cancel () {
        window.history.go(-1);
    }

    //遮罩层关闭
    function mask () {
        if (event.target.nodeName.toLowerCase() == 'body') {
            cancel();
        }
    }

</script>
</html>
